<template>
  <div class="box">
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in imgs" :key="index">
        <img class="banner" :src="image.image_url" />
      </van-swipe-item>
    </van-swipe>
    <ul>
      <li v-for="item in list" :key="item.id">
        <img :src="item.icon_url" alt="" />
        <span>{{ item.name }}</span>
      </li>
    </ul>
    <h3>品牌制造商直供</h3>
    <div class="dbox">
      <div class="xbox" v-for="(item, index) in tu" :key="index">
        <img class="xt" :src="item.new_pic_url" alt="" />
        <span class="shu">{{ item.name }}</span>
      </div>
    </div>
    <div class="dbox">
      <div class="xbox" v-for="(item, index) in dtu" :key="index">
        <img class="xt" :src="item.list_pic_url" alt="" />
        <span>{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgs: [],
      list: [],
      tu: [],
      dtu: [],
    };
  },
  methods: {
    imag() {
      this.$axios
        .get("http://shop.bufantec.com/bufan/index/index")
        .then((res) => {
          console.log(res);
          this.imgs = res.data.banner;
          this.list = res.data.channel;
          this.tu = res.data.brandList;
          this.dtu = res.data.hotGoods;
          console.log(this.imgs);
        });
    },
  },
  mounted() {
    this.imag();
  },
};
</script>

<style>
.xt {
  width: 100%;
  height: 100%;
}
.shu {
  overflow: hidden;
  position: absolute;
  margin-left: 10px;
  margin-top: 20px;
}
.box {
  width: 100%;
  height: 100%;
}
.dbox {
  margin-bottom: 30px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.xbox {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 48%;
  margin-top: 10px;
  height: 150px;
}
.van-swipe {
  width: 100%;
}
.banner {
  width: 100%;
  height: 250px;
}
ul {
  margin-top: 25px;
  margin-bottom: 25px;
  display: flex;
}
li {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>
